<template>
  <div>
    <el-button type="primary" @click="editRule">编辑积分规则</el-button>
    <div class="integral">
      <div class="integral__title">| 积分使用规则</div>
      <div class="integral__content" style="font-size:14px">
        {{ ruleOption.useRuleIntroduce }}
      </div>
      <div class="integral__title">| 积分有效期</div>
      <div class="integral__content" style="font-size:14px">
        积分有效期为{{ ruleOption.integralValidity }}个月
      </div>
      <div class="integral__title">| 积分值规则</div>
      <div class="integral__content" style="font-size:14px">
        {{ ruleOption.integralRuleInfo }}
      </div>
      <div class="integral__title">| 积分获取规则</div>
      <div
        class="integral__content"
        v-for="(item, index) in getList"
        :key="index"
        style="font-size:14px"
      >
        <div v-if="item.ruleType === 0 && item.open">
          每日首次分享获得{{ item.integralRuleParameterDtos[0].value }}点积分
        </div>
        <div v-if="item.ruleType === 1 && item.open">
          每日首次登录获得{{ item.integralRuleParameterDtos[0].value }}点积分,
          第{{ item.integralRuleParameterDtos[1].value }}天连续登录将额外获赠{{
            item.integralRuleParameterDtos[2].value
          }}点积分； 第{{
            item.integralRuleParameterDtos[3].value
          }}天连续登录将额外获得{{
            item.integralRuleParameterDtos[4].value
          }}点积分。
        </div>
        <div v-if="item.ruleType === 2 && item.open">
          每日首次签到获得{{ item.integralRuleParameterDtos[0].value }}点积分,
          第{{ item.integralRuleParameterDtos[1].value }}天连续签到将额外获赠{{
            item.integralRuleParameterDtos[2].value
          }}点积分； 第{{
            item.integralRuleParameterDtos[3].value
          }}天连续签到将额外获得{{
            item.integralRuleParameterDtos[4].value
          }}点积分。
        </div>
        <div v-if="item.ruleType === 3 && item.open">
          每到达{{ item.integralRuleParameterDtos[0].value }}步数可获得{{
            item.integralRuleParameterDtos[1].value
          }}点积分。
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { integralRule } from "@/api/integral/integral";

@Component
export default class RuleContent extends Vue {
  ruleOption = {
    useRuleIntroduce: "",
    integralValidity: "",
    integralRuleInfo: "",
  };

  getList: any = [];

  /** 规则说明 */
  getRule: any = [
    "每日首次分享获得20点积分",
    "每日首次登录获得20点积分,第3天联系登录将额外获赠10点积分；第7天连续登录将额外获得20点积分。",
    " 每日首次签到获得20点积分,第3天联系签到将额外获赠10点积分；第7天连续签到将额外获得20点积分。",
    "每到达1000步数可获得20点积分。",
  ];

  editRule() {
    this.$parent.comName = "EditRule";
    this.$emit("editRule", this.ruleOption, this.getList);
  }

  mounted() {
    this.getRules();
  }

  async getRules() {
    const res = await integralRule({});
    const getList = [];
    res.data.forEach(item => {
      this.ruleOption.useRuleIntroduce = item.useRuleIntroduce;
      this.ruleOption.integralValidity = item.integralValidity;
      this.ruleOption.integralRuleInfo = item.integralRuleInfo;
      getList.push({
        integralRuleParameterDtos: item.integralRuleParameterDtos,
        integralRuleId: item.integralRuleId,
        open: item.open,
        integralShopId: item.integralShopId,
        ruleType: item.ruleType,
      });
    });
    this.getList = getList;
  }
}
</script>

<style lang="scss" scoped>
@include b(integral) {
  font-size: 15px;
  @include e(title) {
    color: #64a9f4;
    font-weight: bold;
    font-size: 14px;
    margin-top: 20px;
  }
  @include e(content) {
    margin-top: 20px;
    padding: 0px 20px;
  }
}
</style>
